import FastImage from "react-native-fast-image";
import { __formatNumber, __getThumbUrl, __isEmpty } from "../common/utils";
import {
  FlatList,
  Platform,
  Pressable,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ViewBase,
} from "react-native";
import LinearGradient from "react-native-linear-gradient";
import SwiperFlatList from "react-native-swiper-flatlist";
import SwiperPipeItem from "./SwiperPipeItem";
import { useEffect, useState } from "react";

import { getPalette } from "@somesoap/react-native-image-palette";
import FollowingCartoonView from "./FollowingCartoonView";
import Icon from "react-native-vector-icons/AntDesign";

const CartoonCardView = ({ index, rcmdCartoonList, item, viewHeight }: any) => {
  const [themeColor, setThemeColor] = useState("black");

  useEffect(() => {
    getThemeColor(item);
  }, []);
  const getThemeColor = async (item: any) => {
    try {
      var url = __isEmpty(item.banner) ? item.avatar : item.banner;
      if (__isEmpty(url)) return;
      url = __getThumbUrl(url, 20);
      const result = await getPalette(url);
      // console.log(result);
      const color =
        (Platform.OS === "ios" ? result.vibrant : result.dominantAndroid) ||
        "black";
      setThemeColor(color);
    } catch (error) {
      console.error("getThemeColor err:", error);
    }
  };

  const renderItem = ({ item }: any) => <FollowingCartoonView item={item} />;

  return (
    <>
      {index === 0 && (
        <View style={{ backgroundColor: "white", height: 120 }}>
          <View
            style={{
              marginVertical: 5,
              height: 20,
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <Pressable>
              <Text style={{ fontSize: 13, marginLeft: 12, color: "rgba(0,0,0,0.3)" }}>
                我的关注
              </Text>
            </Pressable>
            <Pressable>
              <View
                style={{
                  marginRight: 12,
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <Text style={{ fontSize: 13, color: "rgba(0,0,0,0.3)" }}>所有关注</Text>
                <Icon name="right" size={12} color="rgba(0,0,0,0.3)" />
              </View>
            </Pressable>
          </View>
          <FlatList
            showsHorizontalScrollIndicator={false}
            style={{ height: 100, backgroundColor: "white" }}
            data={rcmdCartoonList}
            horizontal={true}
            renderItem={renderItem}
            keyExtractor={(item) => item.key}
          />
        </View>
      )}
      <View
        style={[
          styles.container,
          { height: index === 0 ? viewHeight - 120 : viewHeight },
        ]}
      >
        <View style={styles.card}>
          <FastImage
            resizeMode="cover"
            style={styles.coverImage}
            source={{ uri: __isEmpty(item.banner) ? item.avatar : item.banner }}
          />
          <LinearGradient
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }}
            colors={["transparent", themeColor]}
            style={styles.gradientView}
          />

          <View style={styles.contentView}>
            <View
              style={{
                height: 50,
                //backgroundColor: "red",
                flexDirection: "row",
                marginBottom: 12,
              }}
            >
              <FastImage
                resizeMode="cover"
                style={styles.avatar}
                source={{ uri: item.avatar }}
              ></FastImage>
              <View style={{ flex: 1, marginLeft: 12 }}>
                <View style={{ flexDirection: "row", alignItems: "center" }}>
                  <Text style={[styles.shadowLabel, styles.nameLabel]}>
                    {item.name}
                  </Text>
                  <TouchableOpacity>
                    <View style={styles.followButton}>
                      <Text style={styles.followLabel}>关注</Text>
                    </View>
                  </TouchableOpacity>
                </View>
                <Text style={[styles.nicknameLabel, styles.shadowLabel]}>
                  @{item.user.nickname} 创作
                </Text>
              </View>
            </View>
            {!__isEmpty(item.summary) && (
              <Text style={[styles.summaryText, styles.shadowLabel]}>
                {item.summary}
              </Text>
            )}

            <View style={styles.numView}>
              <View
                style={{ marginLeft: 12, marginRight: 4, alignItems: "center" }}
              >
                <Text style={[styles.numLabel, styles.shadowLabel]}>
                  {__formatNumber(item.useNum)}
                </Text>
                <Text style={[styles.numTitleLabel, styles.shadowLabel]}>
                  总互动
                </Text>
              </View>
              <View style={{ marginHorizontal: 4, alignItems: "center" }}>
                <Text style={[styles.numLabel, styles.shadowLabel]}>
                  {__formatNumber(item.fansNum)}
                </Text>
                <Text style={[styles.numTitleLabel, styles.shadowLabel]}>
                  粉丝
                </Text>
              </View>
              <View style={{ marginHorizontal: 4, alignItems: "center" }}>
                <Text style={[styles.numLabel, styles.shadowLabel]}>
                  {__formatNumber(item.tplNum)}
                </Text>
                <Text style={[styles.numTitleLabel, styles.shadowLabel]}>
                  内容
                </Text>
              </View>
            </View>
            <View style={styles.swiperWrapper}>
              <SwiperFlatList
                autoplay
                autoplayDelay={3}
                autoplayLoop
                showPagination
                data={item.pipeList}
                paginationStyle={{ marginBottom: 2 }}
                paginationStyleItemActive={styles.paginationStyleItemActive}
                paginationStyleItemInactive={styles.paginationStyleItemInactive}
                renderItem={SwiperPipeItem}
              />
            </View>
          </View>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
  },
  card: {
    backgroundColor: "white",
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: 12,
    marginVertical: 16,
    borderRadius: 16,
    ...Platform.select({
      ios: {
        shadowColor: "rgba(0,0,0,0.5)",
        shadowOpacity: 0.8,
        shadowRadius: 6,
        shadowOffset: {
          height: 1,
          width: 1,
        },
      },
      android: {
        elevation: 10,
      },
    }),
  },
  elevation: {
    elevation: 20,
    shadowColor: "#52006A",
  },
  coverImage: {
    width: "100%",
    height: "100%",
    resizeMode: "cover",
    borderRadius: 16,
  },
  gradientView: {
    position: "absolute",
    width: "100%",
    height: "70%",
    bottom: 0,
    borderRadius: 16,
  },
  contentView: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    flex: 1,
    justifyContent: "flex-end",
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginLeft: 10,
    resizeMode: "cover",
    borderWidth: 2,
    borderColor: "white",
  },
  summaryText: {
    color: "rgba(255,255,255,0.8)",
    fontSize: 15,
    marginHorizontal: 12,
    marginBottom: 12,
  },
  numView: {
    height: 50,
    width: "100%",
    flexDirection: "row",
    //backgroundColor: "red",
  },
  swiperWrapper: {
    height: 150,
  },
  paginationStyleItemInactive: {
    backgroundColor: "rgba(255,255,255,0.3)",
    width: 30,
    height: 2,
    marginHorizontal: 4,
  },
  paginationStyleItemActive: {
    backgroundColor: "white",
    width: 30,
    height: 2,
    marginHorizontal: 4,
  },
  numTitleLabel: {
    color: "rgba(255,255,255,0.6)",
    fontSize: 13,
    fontWeight: "bold",
  },
  numLabel: {
    color: "white",
    fontSize: 20,
    ...Platform.select({
      ios: {
        fontFamily: "Open Sans Condensed Bold",
      },
      android: {
        fontFamily: "OpenSans-CondBold",
      },
    }),
  },
  followButton: {
    marginLeft: 8,
    paddingHorizontal: 12,
    paddingVertical: 2,
    backgroundColor: "#3BC859",
    borderRadius: 20,
  },
  followLabel: {
    color: "white",
    fontSize: 14,
    fontWeight: "bold",
  },
  nameLabel: {
    color: "white",
    marginTop: 3,
    fontSize: 20,
    fontWeight: "bold",
  },
  nicknameLabel: {
    color: "rgba(255,255,255,0.6)",
    fontSize: 14,
    fontWeight: "bold",
  },
  shadowLabel: {
    ...Platform.select({
      ios: {
        textShadowOffset: { width: 0, height: 0 },
        textShadowColor: "black",
        textShadowRadius: 1,
        shadowOpacity: 0.1,
      },
      android: {
        textShadowOffset: { width: 1, height: 1 },
        textShadowColor: "rgba(0,0,0,0.3)",
        textShadowRadius: 1,
        shadowOpacity: 1,
      },
    }),
  },
});

export default CartoonCardView;
